<template>
    <div>
        <div class="title">
            <h1>{{ msg }}</h1>
        </div>
        <template v-for="product in cart">
            <product-item :product="product" :key="product._id"> </product-item>
        </template>
    </div>
</template>

<script>
import ProductButtonVue from '@/components/products/ProductButton.vue'
import ProductItemVue from '../components/products/ProductItem.vue'
export default {
    name: 'cart',
    data() {
        return {
            msg: 'cart page'
        }
    },
    computed: {
        cart() {
            return this.$store.state.cart
        }
    },
    methods: {
        removeFromCart(productId) {
            this.$store.commit('REMOVE_FROM_CART', {
                productId
            })
        }
    },
    components: {
        'product-button': ProductButtonVue,
        'product-item': ProductItemVue
    }
}
</script>

<style>
.product {
    border-bottom: 1px solid black;
}
.product__image {
    width: 100px;
    height: 100px;
}
</style>
